<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method='get' enctype="application/x-www-form-urlencoded">
        用户名: <input type="text" name="username"><br><br>
        密&emsp;码:   <input type="text" name="password"><br><br>
        <input type="submit"><br><br>
        </form>
        <!-- 导入jquery.js -->
        <script src="./lib/jquery.js"></script>
        <!-- 导入axios.js -->
        <script src="./lib/axios.js"></script>
    <script>
        // 未来会用form表单收集数据,ajax发送请求
        // 给form表单绑定submit提交事件,并阻止表单默认提交
        const form = document.querySelector('form');
        // 绑定提交事件
         form.addEventListener('submit',function(e){
            // 阻止事件的默认行为
            e.preventDefault()
            // 发送ajax
            axios({
                method:'post',
                url:'http://www.liulongbin.top:3009/api/form',
                // 利用jquery中的 serialize()可以快速获取表单数据
                // 获取的类型是: a=1&b=2&c=3
                data:$(this).serialize() //$(form)可以把DOM对象转换为jquery
                // 查询参数用params ,请求体参数用 data
                // data:{
                //     username:document.querySelector('[name=username]').value,
                //     password:document.querySelector('[name=password]').value,
                // }
            }).then(({ data:res }) =>{
                console.log(res);
            })
         })
    </script>
</body>
</html>